<!DOCTYPE html>
<html lang="en">
<head >
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    //记录玩到第几步了
    let flag = 0;

    // 定义扑克牌的花色和点数
    const suits = ['♠', '♥', '♦', '♣'];
    const ranks = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];

    //创建一个集合,存放随机抽到的4张牌
    const handList = [];

    //存最上面这张神秘牌
    let secretCard = {
        suit: null,
        rank: null
    };

    // 创建一个包含所有牌的对象数组
    const deck = [];
    suits.forEach(suit => {
        ranks.forEach(rank => {
            deck.push({suit, rank});
        });
    });

    // 打乱牌堆顺序（洗牌）
    function shuffle(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
    }

    //洗牌
    shuffle(deck);

    //监听enter键
    document.onkeydown = function (event) {
        event = event || window.event; // 兼容IE8及更早版本
        if (event.keyCode === 13) {
            event.preventDefault();
            console.log('按下了 Enter 键');
            // 在此处执行你的功能代码
            showTime();
        }
    };

    // 获取所选性别
    function getSelectedGender() {
        var radios = document.getElementsByName('gender');
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].checked) {
                return radios[i].value;
            }
        }
        return null; // 如果没有选项被选中，则返回null或其他默认值
    }

    // 获取所选 南方人、北方人、不确定
    function getSelectedSouthNorthPeople() {
        var radios = document.getElementsByName('south_north');
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].checked) {
                return radios[i].value;
            }
        }
        return null; // 如果没有选项被选中，则返回null或其他默认值
    }

    /*
    *  打印数组
    * @param array
    */
    function outputArrayWithCommas(array) {
        let str = "";

        array.forEach(item => {
            str = str + " " + item.suit + item.rank;
        })
        // console.log(str);
        return str;
    }

    // 获取指定范围内的随机整数，包含最小值和最大值
    function getRandomIntInclusive(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    /**
     * [抽方法]根据名字 将特定数量的牌 放入到牌堆中间
     * */
    function makeCard2CardHeapByPeople(name) {
        // 确保结束索引是有效的（不超出数组长度）
        // 使用示例
        let randomInt = getRandomIntInclusive(1, handList.length - name.value.length - 1); // 获取1到手牌数量-名字长度-1之间的随机整数（包括1和10）
        // console.log(randomInt);

        //最上面这张牌
        let cardTop1 = handList.shift();
        //第二张牌
        let cardTop2 = handList.shift();
        //第三张牌
        let cardTop3 = handList.shift();

        //我们要在索引的位置插入元素元素
        handList.splice(randomInt, 0, cardTop1);
        handList.splice(randomInt + 1, 0, cardTop2);
        handList.splice(randomInt + 2, 0, cardTop3);
    }

    /**
     * [抽方法]根据南方人、北方人、不确定 ，将特定数量的牌 放入到牌堆中间
     * */
    function makeCard2CardHeapBySouthNorthPeople(selectedSouthNorthPeople) {
        if (selectedSouthNorthPeople == '南方人') {
            // 确保结束索引是有效的（不超出数组长度）
            // 使用示例
            let randomInt = getRandomIntInclusive(1, handList.length - 1 - 1); // 减去1，因为要排除最上面一张牌
            // console.log("南方人:" + randomInt);

            //最上面这张牌
            let cardTop1 = handList.shift();
            //我们要在索引的位置插入元素元素
            handList.splice(randomInt, 0, cardTop1);
        } else if (selectedSouthNorthPeople == '北方人') {
            // 确保结束索引是有效的（不超出数组长度）
            // 使用示例
            let randomInt = getRandomIntInclusive(1, handList.length - 2 - 1); // 减去2，因为要排除最上面两张牌
            // console.log("北方人:" + randomInt);

            //最上面这张牌
            let cardTop1 = handList.shift();
            //第二张牌
            let cardTop2 = handList.shift();

            //我们要在索引的位置插入元素元素
            handList.splice(randomInt, 0, cardTop1);
            handList.splice(randomInt + 1, 0, cardTop2);
        } else if (selectedSouthNorthPeople == '不确定') {
            // 确保结束索引是有效的（不超出数组长度）
            // 使用示例
            let randomInt = getRandomIntInclusive(1, handList.length - 3 - 1); // 减去3，因为要排除最上面三张牌
            // console.log("不确定:" + randomInt);

            //最上面这张牌
            let cardTop1 = handList.shift();
            //第二张牌
            let cardTop2 = handList.shift();
            //第三张牌
            let cardTop3 = handList.shift();

            //我们要在索引的位置插入元素元素
            handList.splice(randomInt, 0, cardTop1);
            handList.splice(randomInt + 1, 0, cardTop2);
            handList.splice(randomInt + 2, 0, cardTop3);
        }
    }

    /**
     * 点击了开始
     */
    function showTime() {
        //获取姓名输入框的值
        var name = document.getElementById("name");
        //获取所选性别
        let selectedGender = getSelectedGender();
        //获取所选南方人、北方人、不确定
        let selectedSouthNorthPeople = getSelectedSouthNorthPeople();
        if (flag == 0) {
            flag++;
            //让这个button隐藏
            // document.getElementById("button_start").style.display = "none";

            //todo 让所有的 输入框、单选框 无法修改
            // document.getElementById()

            console.log("姓名：" + name.value);
            document.getElementById("card_record").innerHTML = "<br/>" + "姓名：" + name.value;

            console.log("所选性别：" + selectedGender);
            document.getElementById("card_record").innerHTML += "<br/>" + "所选性别：" + selectedGender;

            console.log("你是：" + selectedSouthNorthPeople);
            document.getElementById("card_record").innerHTML += "<br/>" + "你是：" + selectedSouthNorthPeople;

            // 随机抽取四张牌
            const hand = [];
            for (let i = 0; i < 4; i++) {
                let pop = deck.pop();
                hand.push(pop);
                //创建一个集合手机随机抽到的4张牌
                handList.push(pop)
            }

            // 打印手牌
            console.log("");
            console.log("随机获取4张牌：" + outputArrayWithCommas(handList));
            document.getElementById("card_record").innerHTML += "<br/>" + "随机获取4张牌：" + outputArrayWithCommas(handList);
        } else if (flag == 1) {
            flag++;
            //对折撕开手牌
            console.log("");
            console.log("第一步：对折撕开手牌，并堆在一起");
            document.getElementById("card_record").innerHTML += "<br/>" + "<br/>" + "第一步：对折撕开手牌，并堆在一起";
            //讲handList中的元素复制一遍
            handList.forEach(item => {
                handList.push(item);
            })

            // 打印手牌
            console.log("现在的手牌：" + outputArrayWithCommas(handList));
            document.getElementById("card_record").innerHTML += "<br/>" + "现在的手牌：" + outputArrayWithCommas(handList);
        } else if (flag == 2) {
            flag++;
            //将自己名字数量的牌挨个放到手牌的最下面
            console.log("");
            console.log("第二步：将自己名字数量的牌挨个放到手牌的最下面");
            document.getElementById("card_record").innerHTML += "<br/>" + "<br/>" + "第二步：将自己名字数量的牌挨个放到手牌的最下面";
            //将handList中的元素放3张牌数组的最下面
            for (let i = 0; i < name.value.length; i++) {
                var firstElement = handList.shift();
                handList.push(firstElement);
            }

            //打印手牌
            console.log("现在的手牌：" + outputArrayWithCommas(handList));
            document.getElementById("card_record").innerHTML += "<br/>" + "现在的手牌：" + outputArrayWithCommas(handList);
        } else if (flag == 3) {
            flag++;
            //将最上面的3张的牌 不改变顺序的放入 牌堆中间
            console.log("");
            console.log("第三步：将最上面的3张的牌 不改变顺序的放入牌堆中间任意位置");
            document.getElementById("card_record").innerHTML += "<br/>" + "<br/>" + "第三步：将最上面的3张的牌 不改变顺序的放入牌堆中间任意位置";
            //将最前面的3个元祖 不改变顺序的放入牌堆中间

            //根据名字 将特定数量的牌 放入到牌堆中间
            makeCard2CardHeapByPeople(name);

            // 打印手牌
            console.log("现在的手牌：" + outputArrayWithCommas(handList));
            document.getElementById("card_record").innerHTML += "<br/>" + "现在的手牌：" + outputArrayWithCommas(handList);
        } else if (flag == 4) {
            flag++;
            //第四步 将最上面这张牌 取出来 存起来
            console.log("");
            console.log("第四步 将最上面这张牌 藏起来");
            document.getElementById("card_record").innerHTML += "<br/>" + "<br/>" + "第四步 将最上面这张牌 藏起来";
            let shift = handList.shift();
            secretCard = shift;
            console.log("藏起来的这张牌:" + secretCard.suit + secretCard.rank);
            var cardDiv = document.getElementById("secret_card");
            //动态添加内容
            cardDiv.innerText = secretCard.suit + secretCard.rank;

            // 打印手牌
            console.log("现在的手牌：" + outputArrayWithCommas(handList));
            document.getElementById("card_record").innerHTML += "<br/>" + "现在的手牌：" + outputArrayWithCommas(handList);
        } else if (flag == 5) {
            flag++;
            //第五步
            console.log("");
            console.log("第五步根据南北方人、不确定 ，将特定数量的牌 放入到牌堆中间");
            document.getElementById("card_record").innerHTML += "<br/>" + "<br/>" + "第五步根据南北方人、不确定 ，将特定数量的牌 放入到牌堆中间";
            //如果是南方人拿1张
            //如果是北方人拿2张
            //如果不确定拿3张
            //不改变顺序
            makeCard2CardHeapBySouthNorthPeople(selectedSouthNorthPeople);
            // 打印手牌
            console.log("现在的手牌：" + outputArrayWithCommas(handList));
            document.getElementById("card_record").innerHTML += "<br/>" + "现在的手牌：" + outputArrayWithCommas(handList);
        } else if (flag == 6) {
            flag++;
            //第六步
            console.log("");
            console.log("第六步根据男生/女生 ，将特定数量的牌 扔掉");
            document.getElementById("card_record").innerHTML += "<br/>" + "<br/>" + "第六步根据男生/女生 ，将特定数量的牌 扔掉";
            //如果是男生扔1张
            //如果是女生扔2张
            if (selectedGender == '男') {
                handList.shift();
            } else {
                handList.shift();
                handList.shift();
            }

            console.log("现在的手牌：" + outputArrayWithCommas(handList));
            document.getElementById("card_record").innerHTML += "<br/>" + "现在的手牌：" + outputArrayWithCommas(handList);
        } else if (flag == 7) {
            flag++;
            //第七步 见证奇迹的时刻
            console.log("");
            console.log("第七步 见证奇迹的时刻,将手中最上面的牌 依次放7张到牌堆最下面");
            document.getElementById("card_record").innerHTML += "<br/>" + "<br/>" + "第七步 见证奇迹的时刻,将手中最上面的牌 依次放7张到牌堆最下面";
            //将handList中的元素放3张牌数组的最下面
            for (let i = 0; i < 7; i++) {
                var firstElement = handList.shift();
                handList.push(firstElement);
            }

            console.log("现在的手牌：" + outputArrayWithCommas(handList));
            document.getElementById("card_record").innerHTML += "<br/>" + "现在的手牌：" + outputArrayWithCommas(handList);
        } else if (flag == 8) {
            flag++;

            //让隐藏牌出现的按钮 显示
            document.getElementById("bt_show_secert").style.display = "block";

            //第八步 好运留下来 烦恼丢出去
            console.log("");
            console.log("第八步 好运留下来 烦恼丢出去");
            document.getElementById("card_record").innerHTML += "<br/>" + "<br/>" + "第八步 好运留下来 烦恼丢出去";
            while (handList.length > 1) {
                //好运留下来
                var firstElement = handList.shift();
                console.log("留下：" + firstElement.suit + firstElement.rank);
                document.getElementById("card_record").innerHTML += "<br/>" + "留下：" + firstElement.suit + firstElement.rank;
                handList.push(firstElement);
                //烦恼丢出去
                let shift1 = handList.shift();
                console.log("丢掉：" + shift1.suit + shift1.rank);
                document.getElementById("card_record").innerHTML += "<br/>" + "丢掉：" + shift1.suit + shift1.rank;

                console.log("现在的手牌：" + outputArrayWithCommas(handList));
                document.getElementById("card_record").innerHTML += "<br/>" + "现在的手牌：" + outputArrayWithCommas(handList);
            }
        } else {
            document.getElementById("card_record").innerHTML += "<br/>" + "游戏已结束 , 请刷新网页再玩";
        }
    }


</script>
<body style="">
请输入姓名<br/>
<input id="name" type="text" value="CXK">

<br/>
<br/>
<!-- 性别区域   -->
请选择性别<br/>
<input type="radio" id="maleRadio" name="gender" value="男" checked>
<label for="maleRadio">男</label><br>

<input type="radio" id="femaleRadio" name="gender" value="女">
<label for="femaleRadio">女</label><br>


<br/>
<!--  南北方人区域  -->
请选择南北方人<br/>
<input type="radio" id="southRadio" name="south_north" value="南方人" checked>
<label for="southRadio">南方人</label><br>

<input type="radio" id="northRadio" name="south_north" value="北方人">
<label for="northRadio">北方人</label><br>

<input type="radio" id="notKnowRadio" name="south_north" value="不确定">
<label for="notKnowRadio">不确定</label><br>


<br/>

<!--    <button id="button_start" onclick="showTime()">演示开始</button>-->

<br/>
<div id="card_record"></div>

<br/>
<div id="secret_card" hidden></div>
<button hidden id="bt_show_secert" onclick="document.getElementById('secret_card').style.display='block'">显示隐藏的扑克牌
</button>
</body>
</html>